<template>
	<keep-alive>
	<view>
		<view class="head_box">
			<view class="lv_box">
			<!-- 	<image src="../../static/bizhan/lv-gold.png" mode="aspectFill" class="lv_img"></image>
				{{applyData.levleName}} -->
			</view>
			<view class="setFlex">
				<view class="team_box">
					<view class="set_title">团队人数</view>
					<view class="number">{{applyData.length? applyData.length: 0 }}</view>
				</view>
				<view class="team_box">
					<view class="set_title"> 直推人数</view>
					<view class="number">{{applyDatas.length? applyDatas.length: 0}}</view>
				</view>
				<view class="fans_box" >
					<view class="set_title">团队总额</view>
					<view class="num" >{{limits}}</view>
				</view>
			</view>
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#ffffff">
			<swiper-item>
				<view class="swiper-item" @tap="$open('./shareCode')">
					<image src="../../static/bizhan/share.png" mode="aspectFill" class="swiper"></image>
					</view>
			</swiper-item>
		</swiper>
		<view class="content_box">
			<view class="f34 cfff">ID </view>
			<view class="f34 cfff mum_phone">手机号</view>
			<view class="f34 cfff">昵称</view>
			<view class="f34 cfff mum_qua">加入时间</view>
		</view>
		<!-- @tap="$open('ore_team_mumber?teamId='+item.id)" -->
		<view class="team_mum_box" v-for="(item , index) in applyDatas" :key='index' >
			<view class="aside_left">
				<view class="mum_information c666">
					<view class="mum_id f28">{{ item.id }}</view>
					<view class="phone f28"> {{ item.phone|phone}}  </view>
					<view class="mum_lv f28">   {{  item.nickName | nikname}} </view>
				<view class="person_nub f28">{{item.time /1000 | birtime}}
				</view>
				</view>
				<!-- <view class="time f24 c999">
					注册时间：{{item.time |birtime}}
				</view> -->
			</view>
			<!-- <image src="../../static/user/right_arr.png" mode="aspectFill" class="right_arr"></image> -->
				
		</view>
	</view>
	</keep-alive>
</template>

<script>
	export default {
		data() {
			return {
				teamList:[],
				applyData:[],
				applyDatas:[],
				shareCode:'',
				limits:{}
				
			}
		},
		created() {
			this.showMyTeam()
			this.showMyTeams()
		},
	onNavigationBarButtonTap(){
			window.location.reload()
		},
	
		filters:{
			phone(value){
				return value.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3")
			},
			nikname(value){
				return value.substr(0,4)
			}
		},
		methods: {
			showMyTeam(){
				this.$ajax(this.apiList.TeamAllMember,{
					userId:uni.getStorageSync('userinfo').userId
				},"POST").then(res => {
					this.applyData=res.data
				});
			this.$ajax('user/getTeamSpendMoney',{
				userId:uni.getStorageSync('userinfo').userId
			},"POST").then(res => {
				this.limits=res.data
			});
				
			},
			showMyTeams(){
				this.$ajax(this.apiList.TeamSonMember,{
					userId:uni.getStorageSync('userinfo').userId
				},"POST").then(res => {
					this.applyDatas = res.data
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #0E1B45;
	}
	.alert-wrapper{
		background: rgba(0,0,0,.6);
		.alert-inner{
			background: #FFFFFF;
			padding: 20rpx;
			border-radius: 8rpx;
		}
		.f34{
			margin-top: 30rpx;
		}
	}
	.head_box{
		width:690rpx;
		height:300rpx;
		// box-shadow:0rpx 3rpx 11rpx 0rpx rgba(0, 0, 0, 0.3);
		// background-color: #222222;
		padding: 15rpx 0 0 30rpx;
		border-radius: 10rpx;
		margin: 20rpx 30rpx 38rpx 30rpx;
		background: url(../../static/bizhan/s8.png) no-repeat;
		background-size: 100%;
	}
	.lv_box{
		color: #FFD28D;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 50rpx;
		
	}
.lv_img{
	width: 28rpx;
	height: 36rpx;
	margin-right: 17rpx;
}
.team_box{
	border-right: 1rpx solid #FFFFFF;
	width: 344rpx;
}
.team_box:last-child {
	border-right: none;
}
.fans_box{
	width: 344rpx;
}
.setFlex{
	display: flex;
	flex-direction: row;
	text-align: center;
	
}
.set_title{
	font-size: 30rpx;
	font-weight:bold;
	color:#D2EDFF;
	line-height: 30rpx;
	margin: 0rpx 0 50rpx 0;
}
.number{
	font-size:48rpx;
	color:rgba(255,255,255,1);
	line-height: 48rpx;
}
.num{
	font-size:30rpx;
	color:rgba(255,255,255,1);
	line-height: 48rpx;
}
.content_box{
	display: flex;
	flex-direction: row;
	height: 99rpx;
	border-bottom: 1rpx solid #E0E0E0;
	align-items:center;
	padding:0 25upx;
	
}
.f34{
	line-height: 34rpx;
}
.team_mum_box{
	display: flex;
	flex-direction: row;
	// align-items: center;
	// justify-content: space-between;
	border-bottom: 1rpx solid #e0e0e0;
	padding: 0 20upx;
}
.mum_information{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width:700upx;
	margin: 31rpx 0 19rpx 0;
}
// .right_arr{
// 	width: 12rpx;
// 	height: 24rpx;
// }
.mum_phone{
	margin: 0 133rpx 0 155rpx ;
}
.mum_qua{
	margin-left: 100rpx;
}
.f28{
	line-height: 28rpx;
}
.f24{
	line-height: 24rpx;
}
.time{
	margin-bottom: 30rpx;
}
.swiper,swiper{
	width: 750rpx;
	height: 202rpx;
}
.mum_lv{
	
	text-align: center;
}
.person_nub{
	
	display: flex;

	margin: 0;
}
// .person_nubs{
// 	width: 111upx;
// 	display: flex;
// 	border: 1upx solid red;
// 	margin: 0;
// }
.phone{
	
}
.mum_id{

}
</style>
